@witchcraft/ui 0.2.1-beta.3 → 0.2.2

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

@@ -1,5 +1,6 @@
 <template>
-<div :id="id"
+<div
+	:id="id"
 	tabindex="-1"
 	:class="twMerge(
   showOutline ? 'group outlined outlined-visible' : '[&_*]:outline-hidden',
@@ -33,9 +34,14 @@
   $attrs.attrs?.class
 )"
 	>
-		<TestControls v-if="testWrapperMode" :show-outline="showOutline"/>
-		<!-- @vue-expect-error data-allow-mismatch is for vue/nuxt to allow the hydration mismatch-->
-		<Notifications v-if="useNotifications && isClientSide" data-allow-mismatch/>
+		<TestControls
+			v-if="testWrapperMode"
+			:show-outline="showOutline"
+		/>
+		<Notifications
+			v-if="useNotifications && isClientSide"
+			data-allow-mismatch
+		/>
 		<slot/>
 	</div>
 </div>
@@ -43,7 +49,6 @@
 
 <script setup>
 import { unreachable } from "@alanscodelog/utils/unreachable";
-import {} from "metamorphosis";
 import { computed, onBeforeUnmount, onMounted, ref, toRaw } from "vue";
 import { useAccesibilityOutline } from "../../composables/useAccesibilityOutline.js";
 import { useDivideAttrs } from "../../composables/useDivideAttrs.js";
@@ -58,7 +63,7 @@ import { twMerge } from "../../utils/twMerge.js";
 import Notifications from "../LibNotifications/LibNotifications.vue";
 import TestControls from "../TestControls/TestControls.vue";
 const $attrs = useDivideAttrs(["wrapper"]);
-defineOptions({ name: "root", inheritAttrs: false, suspensible: false });
+defineOptions({ name: "Root", inheritAttrs: false, suspensible: false });
 const props = defineProps({
   theme: { type: Object, required: false, default: void 0 },
   outline: { type: Boolean, required: false, default: true },

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

@@ -1,4 +1,4 @@
-import { type Theme } from "metamorphosis";
+import type { Theme } from "metamorphosis";
 import { NotificationHandler } from "../../helpers/NotificationHandler.js.js";
 type __VLS_Props = {
     theme?: Theme;

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

@@ -0,0 +1,35 @@
+import { type InputHTMLAttributes } from "vue";
+import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js.js";
+type RealProps = LinkableByIdProps & LabelProps & BaseInteractiveProps & {
+    placeholder?: InputHTMLAttributes["placeholder"];
+    disabled?: InputHTMLAttributes["disabled"];
+    id?: InputHTMLAttributes["id"];
+    type?: InputHTMLAttributes["type"];
+    valid?: boolean;
+};
+interface Props extends 
+/** @vue-ignore */
+Partial<Omit<InputHTMLAttributes, "class" | "readonly" | "disabled" | "onSubmit" | "onInput"> & TailwindClassProp>, RealProps {
+}
+declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly onInput?: ((val: InputEvent) => any) | undefined;
+        readonly onSubmit?: ((val: T) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((value: T) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onInput" | "onSubmit" | "onUpdate:modelValue"> & (Props & {
+        modelValue: T;
+    }) & {}> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {};
+    emit: {
+        (e: "submit", val: T): void;
+        (e: "input", val: InputEvent): void;
+    } & ((evt: "update:modelValue", value: T) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/LibSimpleInput/LibSimpleInput.vue

@@ -78,7 +78,7 @@ import { hasModifiers } from "../../helpers/hasModifiers.js";
 import { twMerge } from "../../utils/twMerge.js";
 import { getFallbackId } from "../shared/props.js";
 defineOptions({
-  name: "lib-simple-input",
+  name: "LibSimpleInput",
   inheritAttrs: false
 });
 const fallbackId = getFallbackId();

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

@@ -18,7 +18,7 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
         readonly "onUpdate:modelValue"?: ((value: T) => any) | undefined;
     } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onInput" | "onSubmit" | "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/LibSuggestions/LibSuggestions.d.vue.ts

@@ -0,0 +1,94 @@
+import { type HTMLAttributes } from "vue";
+import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type SuggestionsEmits, type SuggestionsProps, type WrapperProps } from "../shared/props.js.js";
+type WrapperTypes = Partial<WrapperProps<"item", HTMLAttributes, {
+    /** Tailwind classes. */
+    class?: string;
+}>>;
+type RealProps = LinkableByIdProps & LabelProps & BaseInteractiveProps & {
+    /** Return true to prevent the keydown event from being handled. */
+    filterKeydown?: (e: KeyboardEvent) => boolean;
+    /** Return true to prevent the blur event from being handled. */
+    filterBlur?: (e: MouseEvent) => boolean;
+    /** Return true to prevent the focus event from being handled. */
+    filterFocus?: (e: FocusEvent) => boolean;
+};
+interface Props extends 
+/** @vue-ignore */
+Partial<Omit<HTMLAttributes, "class" | "onSubmit"> & {
+    /** Tailwind classes. */
+    class?: string;
+}>, 
+/** @vue-ignore */
+WrapperTypes, RealProps {
+}
+declare const _default: <TSuggestion extends string | object, TValue extends string | string[]>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly onSubmit?: ((val: string, suggestion?: any, wasRemoved?: boolean | undefined) => any) | undefined;
+        readonly "onUpdate:isOpen"?: ((val: boolean) => any) | undefined;
+        readonly "onUpdate:activeSuggestion"?: ((val: number) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((value: TValue) => any) | undefined;
+        readonly "onUpdate:inputValue"?: ((value: string) => any) | undefined;
+        readonly "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onSubmit" | "onUpdate:modelValue" | "onUpdate:open" | "onUpdate:isOpen" | "onUpdate:activeSuggestion" | "onUpdate:inputValue"> & (Props & SuggestionsProps<TSuggestion> & {
+        /**
+         * 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.
+         *
+         * If suggestions are objects, this will be the string returned by the `suggestionLabel` prop.
+         */
+        modelValue: TValue;
+        /**
+         * If the element is bound to an input, this is the value that the input should be sharing.
+         *
+         * It allows the component to read even invalid output, and also to reset that invalid output when either modelValue is set to a new value, or when the component is closed via cancel.
+         */
+        inputValue?: string;
+        open?: boolean;
+    }) & {}> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{
+        suggestions: {
+            list: any[] | undefined;
+            filtered: any[] | undefined;
+            active: number;
+            available: boolean;
+            moreThanOneAvailable: boolean;
+            hasExactlyMatching: TSuggestion | undefined;
+            hasValidSuggestion: boolean;
+            openable: boolean | undefined;
+            getLabel: (item: any) => string;
+            $open: boolean;
+            open: () => void;
+            close: () => void;
+            enterSelected: (doClose?: boolean) => void;
+            enterIndex: (num: number, doClose?: boolean) => void;
+            toggle: () => void;
+            cancel: () => void;
+            select: (num: number) => void;
+            prev: () => void;
+            next: () => void;
+            first: () => void;
+            last: () => void;
+        };
+        el: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
+        /** A simple keydown handler that can be passed to an input to control the component while still focused inside it. */
+        inputKeydownHandler: (e: KeyboardEvent) => void;
+        /** A blur handler for the input that controls the component. This also takes care of making clicking on a suggestion work, since otherwise if canOpen is set to false in the blur handler, no click event will fire. */
+        inputBlurHandler: (e: MouseEvent) => void;
+        /** A focus handler for the input that controls the component. */
+        inputFocusHandler: (e: FocusEvent) => void;
+    }>): void;
+    attrs: any;
+    slots: {
+        item?: (props: {
+            item: any;
+            index: any;
+            isSelected: any;
+        }) => any;
+    };
+    emit: SuggestionsEmits<false> & (((evt: "update:modelValue", value: TValue) => void) & ((evt: "update:inputValue", value: string) => void) & ((evt: "update:open", value: boolean) => void));
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/LibSuggestions/LibSuggestions.vue

@@ -17,7 +17,8 @@
 	v-bind="{ ...$.attrs, class: void 0 }"
 >
 	<!-- Click event is just in case, it should not really be triggered. We can do click selections via the blur handler. -->
-	<div :id="`suggestion-${id ?? fallbackId}-${index}`"
+	<div
+		:id="`suggestion-${id ?? fallbackId}-${index}`"
 		role="option"
 		:class="twMerge(
   `
@@ -41,7 +42,8 @@
 		@mousedown.prevent
 		@mouseup="suggestions.enterIndex(index, !Array.isArray($modelValue))"
 	>
-		<slot name="item"
+		<slot
+			name="item"
 			:item="item"
 			:index="index"
 			:is-selected="Array.isArray($modelValue) ? $modelValue.includes(item) : $modelValue === item"
@@ -68,7 +70,7 @@ import { twMerge } from "../../utils/twMerge.js";
 import LibCheckbox from "../LibCheckbox/LibCheckbox.vue";
 import { getFallbackId } from "../shared/props.js";
 defineOptions({
-  name: "lib-suggestions",
+  name: "LibSuggestions",
   inheritAttrs: false
 });
 const $ = useDivideAttrs(["item"]);
@@ -91,7 +93,7 @@ const props = defineProps({
   suggestionsFilter: { type: Function, required: false },
   allowOpenEmpty: { type: Boolean, required: false },
   canOpen: { type: Boolean, required: false, default: true },
-  canClose: { type: Boolean, required: false },
+  canClose: { type: Boolean, required: false, default: true },
   isValid: { type: Boolean, required: false, default: true },
   suggestionSelector: { type: Function, required: false },
   showSelectedValues: { type: Boolean, required: false }

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

@@ -43,7 +43,7 @@ declare const _default: <TSuggestion extends string | object, TValue extends str
          */
         inputValue?: string;
         open?: boolean;
-    }) & Partial<{}>> & import("vue").PublicProps;
+    }) & {}> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{
         suggestions: {
             list: any[] | undefined;

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

@@ -0,0 +1,45 @@
+import { type TableHTMLAttributes } from "vue";
+import type { ResizableOptions, TableColConfig } from "../../types/index.js.js";
+import type { TailwindClassProp } from "../shared/props.js.js";
+type T = any;
+type RealProps = {
+    resizable?: Partial<ResizableOptions>;
+    values?: T[];
+    itemKey?: keyof T | ((item: T) => string);
+    /** Let's the table know the shape of the data since values might be empty. */
+    cols?: (keyof T)[];
+    rounded?: boolean;
+    border?: boolean;
+    cellBorder?: boolean;
+    header?: boolean;
+    colConfig?: TableColConfig<T>;
+};
+interface Props extends 
+/** @vue-ignore */
+Partial<Omit<TableHTMLAttributes, "class" | "readonly" | "disabled"> & TailwindClassProp>, RealProps {
+}
+declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & Props & {}> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {
+        [x: string]: ((props: {
+            colKey: any;
+            style: string;
+            class: string;
+        }) => any) | undefined;
+    } & {
+        [x: string]: ((props: {
+            class: string;
+            item: any;
+            value: any;
+        }) => any) | undefined;
+    };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/LibTable/LibTable.vue

@@ -1,6 +1,7 @@
 <template>
 <!-- Assumes no scrollbars on children -->
-<table :class="twMerge(
+<table
+	:class="twMerge(
   `table
 		table-fixed
 		border-separate
@@ -42,10 +43,17 @@
 )"
 	v-resizable-cols="resizableOptions"
 >
-	<thead v-if="header" class="table--header">
+	<thead
+		v-if="header"
+		class="table--header"
+	>
 		<tr class="table--row">
-			<template v-for="col,i of cols" :key="col">
-				<slot :name="`header-${col.toString()}`"
+			<template
+				v-for="col, i of cols"
+				:key="col"
+			>
+				<slot
+					:name="`header-${col.toString()}`"
 					:class="[
   extraClasses[`-1-${i}`],
   'cell table--header-cell',
@@ -54,7 +62,8 @@
 					:style="`width:${widths.length > 0 ? widths[i] : ``}; `"
 					:col-key="col"
 				>
-					<td :class="[
+					<td
+						:class="[
   extraClasses[`-1-${i}`],
   'cell table--header-cell',
   colConfig[col]?.resizable === false ? 'no-resize' : ''
@@ -68,9 +77,15 @@
 		</tr>
 	</thead>
 	<tbody class="table--body">
-		<template v-for="item, i of values" :key="typeof itemKey === 'function' ? itemKey(item) : item[itemKey]">
+		<template
+			v-for="item, i of values"
+			:key="typeof itemKey === 'function' ? itemKey(item) : item[itemKey]"
+		>
 			<tr class="table--row">
-				<template v-for="col, j of cols" :key="(typeof itemKey === 'function' ? itemKey(item) : item[itemKey]) + col.toString()">
+				<template
+					v-for="col, j of cols"
+					:key="(typeof itemKey === 'function' ? itemKey(item) : item[itemKey]) + col.toString()"
+				>
 					<slot
 						:name="col"
 						:item="item"
@@ -94,7 +109,7 @@ import { computed, ref } from "vue";
 import { vResizableCols } from "../../directives/vResizableCols.js";
 import { twMerge } from "../../utils/twMerge.js";
 defineOptions({
-  name: "lib-table"
+  name: "LibTable"
 });
 const props = defineProps({
   resizable: { type: Object, required: false, default: () => ({}) },

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

@@ -19,7 +19,7 @@ interface Props extends
 Partial<Omit<TableHTMLAttributes, "class" | "readonly" | "disabled"> & TailwindClassProp>, RealProps {
 }
 declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & Props & Partial<{}>> & import("vue").PublicProps;
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & Props & {}> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {

package/dist/runtime/components/Template/NAME.d.vue.ts

@@ -0,0 +1,17 @@
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
+    modelValue: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    modelValue: string;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -11,9 +11,8 @@
 <script setup>
 import { ref } from "vue";
 import { twMerge } from "../../utils/twMerge.js";
-import {} from "../shared/props.js";
 defineOptions({
-  name: "lib-name",
+  name: "LibName",
   /* todo */
   inheritAttrs: false
 });
@@ -23,6 +22,6 @@ const modelValue = defineModel({ type: String, ...{ required: true } });
 
 <script>
 export default {
-  name: "lib-name"
+  name: "LibName"
 };
 </script>

package/dist/runtime/components/Template/NAME.vue.d.ts

@@ -1,6 +1,6 @@
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
     modelValue: string;
-}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<{
     modelValue: string;

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

@@ -0,0 +1,5 @@
+type __VLS_Props = {
+    showOutline: boolean;
+};
+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/TestControls/TestControls.vue

@@ -2,14 +2,16 @@
 <!-- Width 100% + 2xmargin in combination with the margins in LibRoot is a bit of a hack so that it looks like there's padding around the content in test mode (for storybook). We can't just absolutely position these controls or they make the container scroll. -->
 <div class="test-controls flex gap-2 p-1 pb-10 -ml-10 w-[calc(100%_+_var(--spacing)*20)]">
 	<div class="flex-grow"/>
-	<div class="outline-indicator">{{ showOutline ? "Outline Enabled" : "Outline Disabled" }}</div>
+	<div class="outline-indicator">
+		{{ showOutline ? "Outline Enabled" : "Outline Disabled" }}
+	</div>
 	<lib-dark-mode-switcher/>
 </div>
 </template>
 
 <script setup>
 import LibDarkModeSwitcher from "../LibDarkModeSwitcher/LibDarkModeSwitcher.vue";
-defineOptions({ name: "test-controls" });
+defineOptions({ name: "TestControls" });
 defineProps({
   showOutline: { type: Boolean, required: true }
 });

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

@@ -1,5 +1,5 @@
 type __VLS_Props = {
     showOutline: boolean;
 };
-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/composables/useDragWithThreshold.d.ts

@@ -52,7 +52,7 @@ import type { Point } from "../types/index.js.js";
  * }
  * ```
  */
-export declare const useDragWithThreshold: ({ initialOffset, pointerCoords, threshold, }?: {
+export declare const useDragWithThreshold: ({ initialOffset, pointerCoords, threshold }?: {
     initialOffset?: Ref<Point | undefined>;
     pointerCoords?: Ref<Point | undefined>;
     threshold?: Ref<number>;

package/dist/runtime/composables/useInjectedI18n.d.ts

@@ -1,2 +1,2 @@
-import { type TranslationFunction } from "./useSetupI18n.js.js";
+import type { TranslationFunction } from "./useSetupI18n.js.js";
 export declare function useInjectedI18n(): TranslationFunction;

package/dist/runtime/composables/useScrollNearContainerEdges.d.ts

@@ -52,7 +52,7 @@ import type { ScrollNearContainerEdgesOptions } from "../types/index.js.js";
  * </div>
  * ```
  */
-export declare const useScrollNearContainerEdges: ({ containerEl, scrollMargin, outerScrollMargin, fastPixelMultiplier, fastPixelAmount, useTimer, timerInterval, }: ScrollNearContainerEdgesOptions) => {
+export declare const useScrollNearContainerEdges: ({ containerEl, scrollMargin, outerScrollMargin, fastPixelMultiplier, fastPixelAmount, useTimer, timerInterval }: ScrollNearContainerEdgesOptions) => {
     scrollEdges: (clientX: number, clientY: number, overrideUseTimer?: boolean) => void;
     /** Reactive. */
     scrollIndicator: {

package/dist/runtime/composables/useSetupI18n.d.ts

@@ -9,7 +9,7 @@ export type TranslationFunction = (key: string, replacements?: Record<string, an
  *
  * To avoid hydration errors, on the server, the message loading is awaited.
  */
-export declare function useSetupI18n({ locale, useBuiltinTranslations, useDummyMessageSetWhileLoading, translationFunction, }: {
+export declare function useSetupI18n({ locale, useBuiltinTranslations, useDummyMessageSetWhileLoading, translationFunction }: {
     locale: Ref<string>;
     /** Will asynchronously load the built-in translations for the current locale (watching and updating if needed). If you don't use this, you'll need to provide a custom translation function. */
     useBuiltinTranslations?: boolean;

package/dist/runtime/composables/useSuggestions.d.ts

@@ -1,6 +1,6 @@
-import { type AnyFunction } from "@alanscodelog/utils";
+import type { AnyFunction } from "@alanscodelog/utils";
 import { type Ref } from "vue";
-import { type SuggestionsEmits, type SuggestionsOptions } from "../components/shared/props.js.js";
+import type { SuggestionsEmits, SuggestionsOptions } from "../components/shared/props.js.js";
 /**
  * The logic for the suggestions component.
  *

package/dist/runtime/helpers/NotificationHandler.d.ts

@@ -8,7 +8,7 @@ export declare class NotificationHandler<TRawEntry extends RawNotificationEntry<
     maxHistory: number;
     listeners: NotificationListener<TEntry>[];
     stringifier?: NotificationStringifier<TEntry>;
-    constructor({ timeout, stringifier, maxHistory, }?: {
+    constructor({ timeout, stringifier, maxHistory }?: {
         timeout?: NotificationHandler<TRawEntry>["timeout"];
         stringifier?: NotificationHandler<TRawEntry>["stringifier"];
         maxHistory?: NotificationHandler<TRawEntry>["maxHistory"];

package/dist/runtime/helpers/base64ToImg.js

@@ -1,10 +1,10 @@
 export const base64ToImg = async (imageSrc) => {
   const img = new Image();
-  const loaded = new Promise(((resolve) => {
+  const loaded = new Promise((resolve) => {
     img.addEventListener("load", () => {
       resolve(img);
     });
-  }));
+  });
   img.src = imageSrc;
   await loaded;
   return img;

package/dist/runtime/tailwind/themeConvertionOpts.d.ts

@@ -1,2 +1,2 @@
-import { type themeAsTailwindCss } from "metamorphosis/tailwind";
+import type { themeAsTailwindCss } from "metamorphosis/tailwind";
 export declare const themeConvertionOpts: Parameters<typeof themeAsTailwindCss>[1];

package/dist/runtime/types/index.d.ts

@@ -1,5 +1,5 @@
 import type { ErrorW } from "@alanscodelog/utils";
-import { type Ref } from "vue";
+import type { Ref } from "vue";
 export type ResizableOptions = {
     /**
      * Defaults to true.

package/dist/runtime/utils/notifyIfError.d.ts

@@ -5,7 +5,7 @@
  *
  * If the value is not an error, it is returned.
  */
-export declare function notifyIfError<T>(err: T, { logger, ns, force, }?: {
+export declare function notifyIfError<T>(err: T, { logger, ns, force }?: {
     logger?: {
         debug: (...args: any[]) => void;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@witchcraft/ui",
-	"version": "0.2.1-beta.3",
+	"version": "0.2.2",
 	"description": "Vue component library.",
 	"type": "module",
 	"main": "./dist/runtime/main.lib.js",
@@ -59,6 +59,7 @@
 		"storybook:build": "pnpm nuxt prepare && storybook build -o docs/storybook",
 		"storybook:test": "pnpm storybook:build && pnpm concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm http-server docs/storybook --port 6006 --silent\" \"pnpm wait-on tcp:6006 && pnpm test-storybook\"",
 		"test": "pnpm storybook:test && pnpm lint:types",
+		"test:dev": "pnpm concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"pnpm storybook\" \"pnpm wait-on tcp:6006 && pnpm test-storybook --watch\"",
 		"doc": "pnpm test && pnpm storybook:build",
 		"doc:dev": "pnpm storybook",
 		"lint:eslint": "eslint \"src/**/*.{js,ts,vue,cjs}\" \"*.{js,ts}\" --max-warnings=5 --report-unused-disable-directives",
@@ -86,7 +87,6 @@
 	},
 	"dependencies": {
 		"@alanscodelog/utils": "^6.0.1",
-		"@egoist/vue-to-react": "^1.2.0",
 		"@iconify/json": "^2.2.379",
 		"@nuxt/kit": "^4.0.3",
 		"@nuxt/schema": "^4.0.3",
@@ -106,17 +106,17 @@
 	},
 	"devDependencies": {
 		"@alanscodelog/commitlint-config": "^3.1.2",
-		"@alanscodelog/eslint-config": "^5.0.4",
+		"@alanscodelog/eslint-config": "^6.3.0",
 		"@alanscodelog/semantic-release-config": "^5.0.4",
-		"@alanscodelog/tsconfigs": "^6.1.0",
-		"@alanscodelog/vite-config": "^0.0.5",
+		"@alanscodelog/tsconfigs": "^6.2.0",
+		"@alanscodelog/vite-config": "^0.0.6",
 		"@chromatic-com/storybook": "^3.2.7",
 		"@commitlint/cli": "^19.8.1",
 		"@internationalized/date": "^3.9.0",
 		"@nuxt/eslint-config": "^1.9.0",
 		"@nuxt/module-builder": "^1.0.2",
 		"@nuxtjs/i18n": "^9.5.6",
-		"@playwright/test": "^1.55.0",
+		"@playwright/test": "=1.54.0",
 		"@rollup/plugin-node-resolve": "^16.0.1",
 		"@storybook/addon-a11y": "^8.6.14",
 		"@storybook/addon-actions": "^8.6.14",
@@ -141,14 +141,13 @@
 		"autoprefixer": "^10.4.21",
 		"concurrently": "^9.2.1",
 		"eslint": "^9.34.0",
-		"eslint-plugin-jsdoc": "^48.11.0",
 		"http-server": "^14.1.1",
 		"husky": "^9.1.7",
 		"indexit": "2.1.0-beta.3",
 		"madge": "^7.0.0",
 		"nuxt": "^4.0.3",
-		"playwright": "^1.55.0",
-		"playwright-core": "^1.55.0",
+		"playwright": "=1.54.0",
+		"playwright-core": "=1.54.0",
 		"semantic-release": "^24.2.7",
 		"storybook": "^8.6.14",
 		"storybook-dark-mode": "^4.0.2",
@@ -159,7 +158,7 @@
 		"vite": "^7.1.3",
 		"vite-tsconfig-paths": "^5.1.4",
 		"vue": "^3.5.20",
-		"vue-tsc": "3.0.4",
+		"vue-tsc": "3.0.6",
 		"wait-on": "^8.0.4"
 	},
 	"author": "Alan <alanscodelog@gmail.com>",