@witchcraft/ui 0.2.1-beta.3 → 0.2.2

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

@@ -0,0 +1,104 @@
+import { type HTMLAttributes } from "vue";
+import type { TailwindClassProp } from "../shared/props.js.js";
+/**
+ * Pagination component.
+ *
+ * Can be passed a slot like so to use a custom link element (like NuxtLink):
+ * ```vue
+ * <template #link="{ href, i, text, ariaLabel, ariaCurrent}">
+ * 	<NuxtLink :to="href" :aria-label="ariaLabel" :aria-current="ariaCurrent ?? false">{{ text ?? i }}</NuxtLink>
+ * </template>
+ * ```
+ */
+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;
+    };
+    extraPages: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    link?: (props: {
+        class: string;
+        i: any;
+        href: any;
+        text: any;
+        ariaLabel: any;
+    }) => any;
+} & {
+    link?: (props: {
+        class: string;
+        i: number;
+        href: any;
+        text: any;
+        ariaLabel: any;
+    }) => any;
+} & {
+    link?: (props: {
+        i: any;
+        href: any;
+        ariaLabel: any;
+        class: string;
+    }) => any;
+} & {
+    current?: (props: {
+        tabindex: string;
+        i: any;
+        ariaLabel: any;
+        aria_current: boolean;
+        class: string;
+    }) => any;
+} & {
+    link?: (props: {
+        i: any;
+        href: any;
+        ariaLabel: any;
+        class: string;
+    }) => any;
+} & {
+    link?: (props: {
+        i: any;
+        href: any;
+        text: any;
+        ariaLabel: any;
+        class: string;
+    }) => any;
+} & {
+    link?: (props: {
+        i: any;
+        href: any;
+        text: any;
+        ariaLabel: any;
+        class: string;
+    }) => any;
+}>;
+export default _default;
+type RealProps = {
+    /** The total number of pages. */
+    total: number;
+    /** The number of the current page. It must be valid, between 0 - total or the component will throw an error. */
+    current: number;
+    /** The base route/link path for the page. Should end with a forward slash `/`. */
+    route: string;
+    /**
+     * A function to customize the output href and page link number. By default, page 0 is page 1, page 1 is 1, then everything else is normal.
+     *
+     * This is because usually we have routes like: `/page/1`, `/page/2`, not `/page/0`.
+     *
+     * You can use this function to customize things further. For example, make `/page/1` just `/`
+     */
+    customRoute?: (route: string, i: number) => {
+        i: number;
+        href: string;
+    };
+    /** How many extra pages to show to each side of the current page. */
+    extraPages?: number;
+};
+interface Props extends 
+/** @vue-ignore */
+Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>, RealProps {
+}
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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.d.vue.ts

@@ -0,0 +1,14 @@
+import type { Theme } from "metamorphosis";
+import type { BaseInteractiveProps, LinkableByIdProps } from "../shared/props.js.js";
+declare const _default: import("vue").DefineComponent<LinkableByIdProps & BaseInteractiveProps & {
+    theme?: Theme;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkableByIdProps & BaseInteractiveProps & {
+    theme?: Theme;
+}> & Readonly<{}>, {
+    theme: Theme;
+    disabled: boolean;
+    readonly: boolean;
+    border: boolean;
+    unstyle: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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;

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

@@ -0,0 +1,46 @@
+import { type HTMLAttributes } from "vue";
+import { type LinkableByIdProps, type TailwindClassProp, type PopupProps } from "../shared/props.js.js";
+import type { IPopupReference } from "../../types/index.js.js";
+type RealProps = LinkableByIdProps & PopupProps;
+interface Props extends 
+/** @vue-ignore */
+Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>, RealProps {
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props & {
+    modelValue?: boolean;
+}, {
+    recompute: (force?: boolean) => void;
+    setReference: (el: IPopupReference | null) => void;
+    setBackground: (el: IPopupReference | null) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+} & {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<Props & {
+    modelValue?: boolean;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onClose?: (() => any) | undefined;
+}>, {
+    canClose: boolean;
+    useDialogForBackdrop: false;
+    useBackdrop: boolean;
+    preferredHorizontal: ("center" | "right" | "left" | "either" | "center-screen" | "right-most" | "left-most" | "center-most")[] | import("../../main.lib.js.js").PopupPositioner;
+    preferredVertical: ("top" | "bottom" | "center" | "either" | "center-screen" | "top-most" | "bottom-most" | "center-most")[] | import("../../main.lib.js.js").PopupPositioner;
+    avoidRepositioning: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    button?: (props: {
+        extractEl: (_: any) => any;
+    }) => any;
+} & {
+    popup?: (props: {
+        position: any;
+        extractEl: (_: any) => any;
+    }) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/LibPopup/LibPopup.vue

@@ -1,5 +1,6 @@
 <template>
-<slot name="button"
+<slot
+	name="button"
 	:extract-el="(_) => buttonEl = _"
 />
 <!-- <Transition> -->
@@ -26,7 +27,8 @@
 	ref="dialogEl"
 	@mousedown.self="handleMouseup"
 >
-	<div v-if="modelValue"
+	<div
+		v-if="modelValue"
 		:class="`popup z-100 fixed ${props.avoidRepositioning ? 'transition-[top,left]' : ''}`"
 		:style="`
 		top:${pos.y}px;
@@ -46,7 +48,7 @@
 </template>
 
 <script setup>
-import { onMounted, nextTick, ref, useAttrs, watch } from "vue";
+import { onMounted, ref, useAttrs, watch } from "vue";
 import { getFallbackId } from "../shared/props.js";
 import { twMerge } from "../../utils/twMerge.js";
 import { castType } from "@alanscodelog/utils/castType";
@@ -64,7 +66,7 @@ const props = defineProps({
 });
 const $attrs = useAttrs();
 defineOptions({
-  name: "lib-popup",
+  name: "LibPopup",
   inheritAttrs: false
 });
 const emit = defineEmits(["close"]);

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

@@ -1,6 +1,6 @@
 import { type HTMLAttributes } from "vue";
 import { type LinkableByIdProps, type TailwindClassProp, type PopupProps } from "../shared/props.js.js";
-import type { IPopupReference, PopupPositioner } from "../../types/index.js.js";
+import type { IPopupReference } from "../../types/index.js.js";
 type RealProps = LinkableByIdProps & PopupProps;
 interface Props extends 
 /** @vue-ignore */
@@ -25,8 +25,8 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props & {
     canClose: boolean;
     useDialogForBackdrop: false;
     useBackdrop: boolean;
-    preferredHorizontal: ("center" | "right" | "left" | "either" | "center-screen" | "right-most" | "left-most" | "center-most")[] | PopupPositioner;
-    preferredVertical: ("top" | "bottom" | "center" | "either" | "center-screen" | "top-most" | "bottom-most" | "center-most")[] | PopupPositioner;
+    preferredHorizontal: ("center" | "right" | "left" | "either" | "center-screen" | "right-most" | "left-most" | "center-most")[] | import("../../main.lib.js.js").PopupPositioner;
+    preferredVertical: ("top" | "bottom" | "center" | "either" | "center-screen" | "top-most" | "bottom-most" | "center-most")[] | import("../../main.lib.js.js").PopupPositioner;
     avoidRepositioning: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     button?: (props: {

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

@@ -0,0 +1,41 @@
+import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js.js";
+import type { HTMLAttributes } from "vue";
+type RealProps = LinkableByIdProps & BaseInteractiveProps & LabelProps & {
+    progress: number;
+    /** Will auto hide after this given time if progress is 100% or more or less than 0% until progress is set to something else. Disabled (-1) by default. */
+    autohideOnComplete?: number;
+    /**
+     * Do not actually hide the element, just leave an unstyled div,
+     * so the whole layout doesn't change on completion when autohideOnComplete is set.
+     */
+    keepSpaceWhenHidden?: boolean;
+    /**
+     * By default the progress bar is visually clamped to 0-100, even if the value might be something else.
+     * You can change what it's clamped to here, to for example,
+     * show at least a small sliver of the progress bar when it's still 0.
+     */
+    clamp?: [start: number, end: number];
+};
+interface Props extends 
+/** @vue-ignore */
+Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>, RealProps {
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    disabled: boolean;
+    readonly: boolean;
+    border: boolean;
+    unstyle: boolean;
+    autohideOnComplete: number;
+    keepSpaceWhenHidden: boolean;
+    clamp: [start: number, end: number];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+} & {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/LibProgressBar/LibProgressBar.vue

@@ -1,6 +1,7 @@
 <template>
 <Transition>
-	<div v-if="!hide"
+	<div
+		v-if="!hide"
 		:id="id ?? fallbackId"
 		:class="twMerge(`
 			progress-bar
@@ -52,7 +53,8 @@
 			<span class="before:content-vertical-holder"/>
 			<Transition>
 				<slot>
-					<label v-if="!psuedoHide"
+					<label
+						v-if="!psuedoHide"
 						:for="id"
 						class="
 							text-bg
@@ -100,7 +102,7 @@ import { twMerge } from "../../utils/twMerge.js";
 import { getFallbackId } from "../shared/props.js";
 const clampVal = (n, min, max) => Math.min(Math.max(n, min), max);
 defineOptions({
-  name: "lib-progress-bar",
+  name: "LibProgressBar",
   inheritAttrs: false
 });
 const fallbackId = getFallbackId();

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

@@ -1,26 +1,26 @@
-import { type HTMLAttributes } from "vue";
 import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js.js";
+import type { HTMLAttributes } from "vue";
 type RealProps = LinkableByIdProps & BaseInteractiveProps & LabelProps & {
     progress: number;
     /** Will auto hide after this given time if progress is 100% or more or less than 0% until progress is set to something else. Disabled (-1) by default. */
     autohideOnComplete?: number;
     /**
-        * Do not actually hide the element, just leave an unstyled div,
-        * so the whole layout doesn't change on completion when autohideOnComplete is set.
-        */
+     * Do not actually hide the element, just leave an unstyled div,
+     * so the whole layout doesn't change on completion when autohideOnComplete is set.
+     */
     keepSpaceWhenHidden?: boolean;
     /**
-        * By default the progress bar is visually clamped to 0-100, even if the value might be something else.
-        * You can change what it's clamped to here, to for example,
-        * show at least a small sliver of the progress bar when it's still 0.
-        */
+     * By default the progress bar is visually clamped to 0-100, even if the value might be something else.
+     * You can change what it's clamped to here, to for example,
+     * show at least a small sliver of the progress bar when it's still 0.
+     */
     clamp?: [start: number, end: number];
 };
 interface Props extends 
 /** @vue-ignore */
 Partial<Omit<HTMLAttributes, "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<{}>, {
     disabled: boolean;
     readonly: boolean;
     border: boolean;

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

@@ -0,0 +1,77 @@
+import { type HTMLAttributes } from "vue";
+import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js.js";
+type RealProps = LinkableByIdProps & BaseInteractiveProps & LabelProps & {
+    border?: boolean;
+    /** A value to display while recording, if none given the i18n `recorder.recording` key is used. */
+    recordingValue?: string;
+    /** A title to display on the input div while recording. Is also used as the aria-description. */
+    recordingTitle?: string;
+    /**
+     * The recorder object is a series of event listeners to attach to the input div while recording is started. If you need to bind directly to the element, see the `binders` prop.
+     *
+     * The listeners are then unbound when recording is set to false again.
+     *
+     * Note that the component does not handle the setting of `recording` (unless the component is disabled), `modelValue`,  or `recordingValue` at all and has no mechanism for cancelling a recording. It is left to the recorder listeners and any `recorder:*` handlers to determine what to do.
+     */
+    recorder?: undefined | Record<string, any>;
+    /** This provides a way to manually attach/remove event listeners to/from the element. It is an alternative to the `recorder` prop, see it for more details. Both cannot be specified at the same time. */
+    binders?: undefined | {
+        bind: (el: HTMLElement) => void;
+        unbind: (el: HTMLElement) => void;
+    };
+    /** The id of the element. If not provided, the id will be generated automatically. */
+    id?: string;
+};
+interface Props extends 
+/** @vue-ignore */
+Partial<Omit<HTMLAttributes, "class"> & TailwindClassProp>, RealProps {
+}
+declare const _default: import("vue").DefineComponent<Props & {
+    /**
+     * Puts the element into recording mode if true. See {@link props.recorder}.
+     */
+    recording?: boolean;
+    /** The final value of the recorder. For intermediate values while recording, pass a recorder and set an appropriate recording value. */
+    modelValue: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+    "update:recording": (value: boolean) => any;
+} & {
+    "recorder:blur": ($event: FocusEvent) => any;
+    "recorder:click": (args_0: {
+        event: MouseEvent | KeyboardEvent;
+        indicator: HTMLElement;
+        input: HTMLInputElement;
+    }) => any;
+    "focus:parent": () => any;
+}, string, import("vue").PublicProps, Readonly<Props & {
+    /**
+     * Puts the element into recording mode if true. See {@link props.recorder}.
+     */
+    recording?: boolean;
+    /** The final value of the recorder. For intermediate values while recording, pass a recorder and set an appropriate recording value. */
+    modelValue: string;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:recording"?: ((value: boolean) => any) | undefined;
+    "onRecorder:blur"?: (($event: FocusEvent) => any) | undefined;
+    "onRecorder:click"?: ((args_0: {
+        event: MouseEvent | KeyboardEvent;
+        indicator: HTMLElement;
+        input: HTMLInputElement;
+    }) => any) | undefined;
+    "onFocus:parent"?: (() => any) | undefined;
+}>, {
+    id: string;
+    disabled: boolean;
+    readonly: boolean;
+    border: boolean;
+    unstyle: boolean;
+    recordingTitle: string;
+    recorder: Record<string, any>;
+    binders: {
+        bind: (el: HTMLElement) => void;
+        unbind: (el: HTMLElement) => void;
+    };
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/LibRecorder/LibRecorder.vue

@@ -78,7 +78,7 @@ import { useInjectedI18n } from "../../composables/useInjectedI18n.js";
 import { twMerge } from "../../utils/twMerge.js";
 import { getFallbackId } from "../shared/props.js";
 defineOptions({
-  name: "lib-recorder",
+  name: "LibRecorder",
   inheritAttrs: false
 });
 const t = useInjectedI18n();

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

@@ -14,7 +14,7 @@ type RealProps = LinkableByIdProps & BaseInteractiveProps & LabelProps & {
      * Note that the component does not handle the setting of `recording` (unless the component is disabled), `modelValue`,  or `recordingValue` at all and has no mechanism for cancelling a recording. It is left to the recorder listeners and any `recorder:*` handlers to determine what to do.
      */
     recorder?: undefined | Record<string, any>;
-    /** This provides a way to manually attach/remove event listeners to/from the element. It is an alternative to the `recorder` prop, see it for more details. Both cannot be specified at the same time.*/
+    /** This provides a way to manually attach/remove event listeners to/from the element. It is an alternative to the `recorder` prop, see it for more details. Both cannot be specified at the same time. */
     binders?: undefined | {
         bind: (el: HTMLElement) => void;
         unbind: (el: HTMLElement) => void;
@@ -33,7 +33,7 @@ declare const _default: import("vue").DefineComponent<Props & {
     recording?: boolean;
     /** The final value of the recorder. For intermediate values while recording, pass a recorder and set an appropriate recording value. */
     modelValue: string;
-}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
     "update:recording": (value: boolean) => any;
 } & {

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

@@ -0,0 +1,41 @@
+import type { Theme } from "metamorphosis";
+import { NotificationHandler } from "../../helpers/NotificationHandler.js.js";
+type __VLS_Props = {
+    theme?: Theme;
+    outline?: boolean;
+    forceOutline?: boolean;
+    testWrapperMode?: boolean;
+    id?: string;
+    /** You can set a ref to the root element by passing :getRef="_ => el = _" */
+    getRef?: (el: HTMLElement | null) => void;
+    /** True by default, should be passed import.meta.client if using nuxt, or false when running server side. */
+    isClientSide?: boolean;
+    useBuiltinTranslations?: boolean;
+    useNotifications?: boolean;
+    notificationHandler?: NotificationHandler;
+};
+declare var __VLS_9: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {
+    darkMode: import("../../composables/useDarkMode.js.js").DarkModeState & import("../../composables/useDarkMode.js.js").DarkModeCommands;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    theme: Theme;
+    id: string;
+    useBuiltinTranslations: boolean;
+    isClientSide: boolean;
+    outline: boolean;
+    forceOutline: boolean;
+    testWrapperMode: boolean;
+    getRef: (el: HTMLElement | null) => void;
+    useNotifications: boolean;
+    notificationHandler: NotificationHandler;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};