@witchcraft/ui 0.3.1 → 0.3.3

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

@@ -1,67 +1,129 @@
 <template>
+<!-- using custom toasts, reka-ui toasts still have issues, like like of control over pause, and I can't get the leave event to animate or transition with vue transitions to work -->
 <TransitionGroup
 	name="list"
 	tag="div"
-	:class="twMerge(`notifications
-			absolute
-			z-50
-			inset-y-0 right-0
-			w-1/3
-			min-w-[300px]
-			pointer-events-none
-			overflow-hidden
-			flex flex-col
-		`, $attrs.class)"
+	:class="twMerge(`
+		notifications
+		[--notification-width:300px]
+		fixed
+		top-0
+		z-50
+		right-[calc(var(--notification-width)*-1)]
+		py-2
+		w-[calc(var(--spacing)*2+var(--notification-width)*2)]
+		[&_.notification]:w-[var(--notification-width)]
+		max-h-[100dvh]
+		flex
+		flex-col
+		[&_.notification]:shrink-0
+		gap-1
+		list-none
+		outline-none
+		overflow-y-auto
+		overflow-x-clip
+		scrollbar-hidden
+	`, $attrs.class)"
 	v-bind="{ ...$attrs, class: void 0 }"
 >
 	<lib-notification
-		class="pointer-events-auto"
 		:handler="handler"
 		tabindex="0"
 		:notification="notification"
+		class="overflow-hidden"
 		v-for="notification of notifications"
 		:key="notification.id"
-	/>
-</TransitionGroup>
-<Transition>
-	<div
-		v-show="topNotifications.length > 0"
-		:class="twMerge(`notifications--none`, $attrs.class)"
-	/>
-</Transition>
-<Transition>
-	<dialog
-		v-show="topNotifications.length > 0"
-		:id="id"
-		:class="twMerge(`notifications-modal
-			bg-transparent
-			p-0
-			backdrop:bg-black/50
-			backdrop:p-5
-		`, $attrs.class)"
-		ref="dialogEl"
-		@click.self.prevent="topNotifications[0] && NotificationHandler.dismiss(topNotifications[0])"
+		@pointerenter="notification.timeout && !notification.isPaused && handler.pause(notification)"
+		@blur="notification.timeout && notification.isPaused && handler.resume(notification)"
 	>
-		<form>
+		<template #top>
+			<LibProgressBar
+				v-if="notification.timeout !== void 0"
+				class="
+					w-full
+					h-1
+					before:duration-[10ms]
+					-mt-1
+					-mx-[calc(var(--spacing)*2+2px)]
+					rounded-none
+				"
+				:progress="100 - (notification.isPaused ? notification._timer.elapsedBeforePause : notification._timer.elapsedBeforePause + (time - notification.startTime)) / notification.timeout * 100"
+			/>
+		</template>
+	</lib-notification>
+</TransitionGroup>
+<!-- we don't need to worry about the user accidentally closing a non-closable dialog as keeping open=true (which the handler handles when the component tries to close) is enough to keep it open without issues -->
+<AlertDialogRoot
+	:open="topNotifications.length > 0 && topNotifications[0] !== void 0"
+	@update:open="topNotifications[0] && NotificationHandler.dismiss(topNotifications[0])"
+>
+	<AlertDialogPortal :to="'#root'">
+		<AlertDialogOverlay
+			class="
+				fixed inset-0 z-30
+				bg-neutral-950/20
+				data-[state=open]:animate-overlayShow
+			"
+		/>
+		<AlertDialogContent
+			class="
+				data-[state=open]:animate-contentShow
+				fixed
+				top-[50%]
+				left-[50%]
+				translate-x-[-50%]
+				translate-y-[-50%]
+				max-h-[80dvh]
+				max-w-[700px]
+				z-100
+			"
+		>
 			<lib-notification
-				v-if="topNotifications.length > 0 && topNotifications[0]"
+				class="
+					top-notification
+					text-md
+					gap-2
+					p-2
+					[&_.notification--button]:p-2
+					[&_.notification--button]:py-1
+					[&_.notification--header]:text-lg
+					[&_.notification--message]:py-3
+				"
 				:handler="handler"
-				class="top-notification"
 				:notification="topNotifications[0]"
 				ref="topNotificationComp"
-			/>
-		</form>
-	</dialog>
-</Transition>
+			>
+				<template #title="slotProps">
+					<AlertDialogTitle v-bind="slotProps">
+						{{ slotProps.title }}
+					</AlertDialogTitle>
+				</template>
+				<template #message="slotProps">
+					<AlertDialogDescription v-bind="slotProps">
+						{{ slotProps.message }}
+					</AlertDialogDescription>
+				</template>
+			</lib-notification>
+		</AlertDialogContent>
+	</AlertDialogPortal>
+</AlertDialogRoot>
 </template>
 
 <script setup>
-import { removeIfIn } from "@alanscodelog/utils/removeIfIn";
-import { nextTick, onBeforeUnmount, ref, shallowReactive } from "vue";
+import {
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogRoot,
+  AlertDialogTitle
+} from "reka-ui";
+import { computed, ref } 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";
+import LibProgressBar from "../LibProgressBar/LibProgressBar.vue";
 defineOptions({
   name: "LibNotifications",
   inheritAttrs: false
@@ -70,54 +132,15 @@ const props = defineProps({
   id: { type: String, required: false },
   handler: { type: Object, required: false }
 });
-const dialogEl = ref(null);
-const isOpen = ref(false);
-const notifications = shallowReactive([]);
-const topNotifications = shallowReactive([]);
-const open = () => {
-  if (!isOpen.value) {
-    void nextTick(() => {
-      dialogEl.value.showModal();
-      isOpen.value = true;
-    });
-  }
-};
-const close = () => {
-  if (isOpen.value && topNotifications.length === 0) {
-    dialogEl.value.close();
-    isOpen.value = false;
-  }
-};
-const addNotification = (entry) => {
-  if (entry.resolution === void 0) {
-    if (entry.requiresAction) {
-      topNotifications.push(entry);
-      open();
-      entry.promise.then(() => {
-        removeIfIn(topNotifications, entry);
-        close();
-      });
-    } else {
-      notifications.splice(0, 0, entry);
-      entry.promise.then(() => {
-        removeIfIn(notifications, entry);
-      });
-    }
-  }
-};
-const notificationListener = (entry, type) => {
-  if (type === "added") {
-    addNotification(entry);
-  }
-};
+const topNotifications = computed(() => handler.queue.filter((entry) => entry.requiresAction).reverse());
+const notifications = computed(() => handler.queue.filter((entry) => !entry.requiresAction));
+const time = ref(Date.now());
+setInterval(() => {
+  requestAnimationFrame(() => {
+    time.value = Date.now();
+  });
+}, 50);
 const handler = props.handler ?? useNotificationHandler();
-handler.addNotificationListener(notificationListener);
-for (const entry of handler.queue) {
-  addNotification(entry);
-}
-onBeforeUnmount(() => {
-  handler.removeNotificationListener(notificationListener);
-});
 </script>
 
 <script>

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

@@ -1,5 +1,5 @@
-import { NotificationHandler } from "../../helpers/NotificationHandler.js.js";
-import type { LinkableByIdProps, TailwindClassProp } from "../shared/props.js.js";
+import { NotificationHandler } from "../../helpers/NotificationHandler.js";
+import type { LinkableByIdProps, TailwindClassProp } from "../shared/props.js";
 import type { HTMLAttributes } from "vue";
 type RealProps = LinkableByIdProps & {
     /** If not provided, uses the global handler (this requires useNotificationHandler be called and configured). */

package/dist/runtime/components/LibPagination/LibPagination.d.vue.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";
 /**
  * Pagination component.
  *

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";
 /**
  * Pagination component.
  *

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

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

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

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

package/dist/runtime/components/LibPopup/LibPopup.d.vue.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 } from "../../types/index.js.js";
+import { type LinkableByIdProps, type TailwindClassProp, type PopupProps } from "../shared/props.js";
+import type { IPopupReference } from "../../types/index.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")[] | 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;
+    preferredHorizontal: ("center" | "right" | "left" | "either" | "center-screen" | "right-most" | "left-most" | "center-most")[] | import("../../main.lib.js").PopupPositioner;
+    preferredVertical: ("top" | "bottom" | "center" | "either" | "center-screen" | "top-most" | "bottom-most" | "center-most")[] | import("../../main.lib.js").PopupPositioner;
     avoidRepositioning: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     button?: (props: {

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

@@ -76,7 +76,7 @@ const buttonEl = ref(null);
 const backgroundEl = ref(null);
 const pos = ref({});
 const modelValue = defineModel({ type: Boolean, ...{ default: false } });
-let isOpen = false;
+let isOpen = modelValue.value;
 const getDialogBoundingRect = () => ({
   x: 0,
   y: 0,
@@ -324,10 +324,6 @@ const close = () => {
     if (props.useBackdrop && props.useDialogForBackdrop) dialogEl.value?.close();
   }
 };
-const toggle = () => {
-  if (!isOpen) show();
-  else close();
-};
 const recomputeListener = () => recompute();
 const bindListeners = () => {
   window.addEventListener("resize", recomputeListener);
@@ -348,7 +344,7 @@ watch([modelValue, popupEl], () => {
 });
 const handleMouseup = ($event) => {
   $event.preventDefault();
-  toggle();
+  close();
 };
 onMounted(() => {
   recompute();

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 } from "../../types/index.js.js";
+import { type LinkableByIdProps, type TailwindClassProp, type PopupProps } from "../shared/props.js";
+import type { IPopupReference } from "../../types/index.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")[] | 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;
+    preferredHorizontal: ("center" | "right" | "left" | "either" | "center-screen" | "right-most" | "left-most" | "center-most")[] | import("../../main.lib.js").PopupPositioner;
+    preferredVertical: ("top" | "bottom" | "center" | "either" | "center-screen" | "top-most" | "bottom-most" | "center-most")[] | import("../../main.lib.js").PopupPositioner;
     avoidRepositioning: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     button?: (props: {

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

@@ -1,6 +1,7 @@
-import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js.js";
+import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js";
 import type { HTMLAttributes } from "vue";
 type RealProps = LinkableByIdProps & BaseInteractiveProps & LabelProps & {
+    /** A number from 0-100. It is auto-clamped. */
     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;

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

@@ -28,7 +28,7 @@
 			before:shadow-black/50
 			before:rounded-sm
 			before:bg-bars-gradient
-			before:animate-[slide_10s_linear_infinite]
+			before:animate-slideBgInf
 			before:[background-size:15px_15px]
 			before:absolute
 			before:w-[var(--progress)]

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

@@ -1,6 +1,7 @@
-import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js.js";
+import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js";
 import type { HTMLAttributes } from "vue";
 type RealProps = LinkableByIdProps & BaseInteractiveProps & LabelProps & {
+    /** A number from 0-100. It is auto-clamped. */
     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;

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

@@ -1,5 +1,5 @@
 import { type HTMLAttributes } from "vue";
-import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js.js";
+import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js";
 type RealProps = LinkableByIdProps & BaseInteractiveProps & LabelProps & {
     border?: boolean;
     /** A value to display while recording, if none given the i18n `recorder.recording` key is used. */

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

@@ -55,7 +55,7 @@
 				hover:bg-red-500
 			`,
   recording && `
-				animate-[blink_1s_infinite]
+				animate-blinkInf
 				bg-red-500
 			`,
   (disabled || readonly) && `

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

@@ -1,5 +1,5 @@
 import { type HTMLAttributes } from "vue";
-import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js.js";
+import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js";
 type RealProps = LinkableByIdProps & BaseInteractiveProps & LabelProps & {
     border?: boolean;
     /** A value to display while recording, if none given the i18n `recorder.recording` key is used. */

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

@@ -1,5 +1,5 @@
 import type { Theme } from "metamorphosis";
-import { NotificationHandler } from "../../helpers/NotificationHandler.js.js";
+import { NotificationHandler } from "../../helpers/NotificationHandler.js";
 type __VLS_Props = {
     theme?: Theme;
     outline?: boolean;
@@ -19,7 +19,7 @@ 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;
+    darkMode: import("../../composables/useDarkMode.js").DarkModeState & import("../../composables/useDarkMode.js").DarkModeCommands;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     theme: Theme;
     id: string;

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

@@ -1,5 +1,5 @@
 import type { Theme } from "metamorphosis";
-import { NotificationHandler } from "../../helpers/NotificationHandler.js.js";
+import { NotificationHandler } from "../../helpers/NotificationHandler.js";
 type __VLS_Props = {
     theme?: Theme;
     outline?: boolean;
@@ -19,7 +19,7 @@ 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;
+    darkMode: import("../../composables/useDarkMode.js").DarkModeState & import("../../composables/useDarkMode.js").DarkModeCommands;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     theme: Theme;
     id: string;

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

@@ -1,5 +1,5 @@
 import { type InputHTMLAttributes } from "vue";
-import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js.js";
+import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js";
 type RealProps = LinkableByIdProps & LabelProps & BaseInteractiveProps & {
     placeholder?: InputHTMLAttributes["placeholder"];
     disabled?: InputHTMLAttributes["disabled"];

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

@@ -1,5 +1,5 @@
 import { type InputHTMLAttributes } from "vue";
-import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js.js";
+import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js";
 type RealProps = LinkableByIdProps & LabelProps & BaseInteractiveProps & {
     placeholder?: InputHTMLAttributes["placeholder"];
     disabled?: InputHTMLAttributes["disabled"];

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

@@ -1,5 +1,5 @@
 import { type HTMLAttributes } from "vue";
-import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type SuggestionsEmits, type SuggestionsProps, type WrapperProps } from "../shared/props.js.js";
+import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type SuggestionsEmits, type SuggestionsProps, type WrapperProps } from "../shared/props.js";
 type WrapperTypes = Partial<WrapperProps<"item", HTMLAttributes, {
     /** Tailwind classes. */
     class?: string;

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

@@ -1,5 +1,5 @@
 import { type HTMLAttributes } from "vue";
-import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type SuggestionsEmits, type SuggestionsProps, type WrapperProps } from "../shared/props.js.js";
+import { type BaseInteractiveProps, type LabelProps, type LinkableByIdProps, type SuggestionsEmits, type SuggestionsProps, type WrapperProps } from "../shared/props.js";
 type WrapperTypes = Partial<WrapperProps<"item", HTMLAttributes, {
     /** Tailwind classes. */
     class?: string;

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

@@ -1,6 +1,6 @@
 import { type TableHTMLAttributes } from "vue";
-import type { ResizableOptions, TableColConfig } from "../../types/index.js.js";
-import type { TailwindClassProp } from "../shared/props.js.js";
+import type { ResizableOptions, TableColConfig } from "../../types/index.js";
+import type { TailwindClassProp } from "../shared/props.js";
 type T = any;
 type RealProps = {
     resizable?: Partial<ResizableOptions>;

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

@@ -1,6 +1,6 @@
 import { type TableHTMLAttributes } from "vue";
-import type { ResizableOptions, TableColConfig } from "../../types/index.js.js";
-import type { TailwindClassProp } from "../shared/props.js.js";
+import type { ResizableOptions, TableColConfig } from "../../types/index.js";
+import type { TailwindClassProp } from "../shared/props.js";
 type T = any;
 type RealProps = {
     resizable?: Partial<ResizableOptions>;

package/dist/runtime/components/Template/TemplateStory.d.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/vue3";
-import NAME from "./NAME.vue.js";
+import NAME from "./NAME.vue";
 declare const meta: Meta<typeof NAME>;
 export default meta;
 type Story = StoryObj<typeof NAME>;

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

@@ -1,20 +1,20 @@
-export { default as aria } from "./Aria/Aria.vue.js";
-export { default as LibButton } from "./LibButton/LibButton.vue.js";
-export { default as LibCheckbox } from "./LibCheckbox/LibCheckbox.vue.js";
-export { default as LibColorInput } from "./LibColorInput/LibColorInput.vue.js";
-export { default as LibColorPicker } from "./LibColorPicker/LibColorPicker.vue.js";
-export { default as LibDarkModeSwitcher } from "./LibDarkModeSwitcher/LibDarkModeSwitcher.vue.js";
-export { default as LibDatePicker } from "./LibDatePicker/LibDatePicker.vue.js";
-export { default as LibDebug } from "./LibDebug/LibDebug.vue.js";
-export { default as LibFileInput } from "./LibFileInput/LibFileInput.vue.js";
-export { default as LibInputDeprecated } from "./LibInputDeprecated/LibInputDeprecated.vue.js";
-export { default as LibLabel } from "./LibLabel/LibLabel.vue.js";
-export { default as LibNotifications } from "./LibNotifications/LibNotifications.vue.js";
-export { default as LibPagination } from "./LibPagination/LibPagination.vue.js";
-export { default as LibPopup } from "./LibPopup/LibPopup.vue.js";
-export { default as LibProgressBar } from "./LibProgressBar/LibProgressBar.vue.js";
-export { default as LibRecorder } from "./LibRecorder/LibRecorder.vue.js";
-export { default as LibRoot } from "./LibRoot/LibRoot.vue.js";
-export { default as LibSimpleInput } from "./LibSimpleInput/LibSimpleInput.vue.js";
-export { default as LibTable } from "./LibTable/LibTable.vue.js";
-export { default as LibTimeZonePicker } from "./LibDatePicker/LibTimeZonePicker.vue.js";
+export { default as aria } from "./Aria/Aria.vue";
+export { default as LibButton } from "./LibButton/LibButton.vue";
+export { default as LibCheckbox } from "./LibCheckbox/LibCheckbox.vue";
+export { default as LibColorInput } from "./LibColorInput/LibColorInput.vue";
+export { default as LibColorPicker } from "./LibColorPicker/LibColorPicker.vue";
+export { default as LibDarkModeSwitcher } from "./LibDarkModeSwitcher/LibDarkModeSwitcher.vue";
+export { default as LibDatePicker } from "./LibDatePicker/LibDatePicker.vue";
+export { default as LibDebug } from "./LibDebug/LibDebug.vue";
+export { default as LibFileInput } from "./LibFileInput/LibFileInput.vue";
+export { default as LibInputDeprecated } from "./LibInputDeprecated/LibInputDeprecated.vue";
+export { default as LibLabel } from "./LibLabel/LibLabel.vue";
+export { default as LibNotifications } from "./LibNotifications/LibNotifications.vue";
+export { default as LibPagination } from "./LibPagination/LibPagination.vue";
+export { default as LibPopup } from "./LibPopup/LibPopup.vue";
+export { default as LibProgressBar } from "./LibProgressBar/LibProgressBar.vue";
+export { default as LibRecorder } from "./LibRecorder/LibRecorder.vue";
+export { default as LibRoot } from "./LibRoot/LibRoot.vue";
+export { default as LibSimpleInput } from "./LibSimpleInput/LibSimpleInput.vue";
+export { default as LibTable } from "./LibTable/LibTable.vue";
+export { default as LibTimeZonePicker } from "./LibDatePicker/LibTimeZonePicker.vue";

package/dist/runtime/components/shared/props.d.ts

@@ -1,4 +1,4 @@
-import type { PopupPositioner, PopupPositionModifier } from "../../types/index.js";
+import type { PopupPositioner, PopupPositionModifier } from "../../types";
 export interface LinkableByIdProps {
     /**
      * The id for the input. Uses vue's useId if none provided.

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

@@ -1,15 +1,17 @@
-export { useAccesibilityOutline } from "./useAccesibilityOutline.js.js";
-export { useAriaLabel } from "./useAriaLabel.js.js";
-export { useDarkMode } from "./useDarkMode.js.js";
-export { useDivideAttrs } from "./useDivideAttrs.js.js";
-export { useDragWithThreshold } from "./useDragWithThreshold.js.js";
-export { useGlobalResizeObserver } from "./useGlobalResizeObserver.js.js";
-export { useInjectedDarkMode } from "./useInjectedDarkMode.js.js";
-export { useInjectedI18n } from "./useInjectedI18n.js.js";
-export { useInjectedLocale } from "./useInjectedLocale.js.js";
-export { useNotificationHandler } from "./useNotificationHandler.js.js";
-export { usePreHydrationValue } from "./usePreHydrationValue.js.js";
-export { useScrollNearContainerEdges } from "./useScrollNearContainerEdges.js.js";
-export { useSetupDarkMode } from "./useSetupDarkMode.js.js";
-export { useShowDevOnlyKey } from "./useShowDevOnlyKey.js.js";
-export { useSuggestions } from "./useSuggestions.js.js";
+export { useAccesibilityOutline } from "./useAccesibilityOutline.js";
+export { useAriaLabel } from "./useAriaLabel.js";
+export { useDarkMode } from "./useDarkMode.js";
+export { useDivideAttrs } from "./useDivideAttrs.js";
+export { useDragWithThreshold } from "./useDragWithThreshold.js";
+export { useGlobalResizeObserver } from "./useGlobalResizeObserver.js";
+export { useInjectedDarkMode } from "./useInjectedDarkMode.js";
+export { useInjectedI18n } from "./useInjectedI18n.js";
+export { useInjectedLocale } from "./useInjectedLocale.js";
+export { useNotificationHandler } from "./useNotificationHandler.js";
+export { usePreHydrationValue } from "./usePreHydrationValue.js";
+export { useScrollNearContainerEdges } from "./useScrollNearContainerEdges.js";
+export { useSetupDarkMode } from "./useSetupDarkMode.js";
+export { useSetupLocale } from "./useSetupLocale.js";
+export { useShowDevOnlyKey } from "./useShowDevOnlyKey.js";
+export { useSlotVars } from "./useSlotVars.js";
+export { useSuggestions } from "./useSuggestions.js";

package/dist/runtime/composables/index.js

@@ -11,5 +11,7 @@ export { useNotificationHandler } from "./useNotificationHandler.js";
 export { usePreHydrationValue } from "./usePreHydrationValue.js";
 export { useScrollNearContainerEdges } from "./useScrollNearContainerEdges.js";
 export { useSetupDarkMode } from "./useSetupDarkMode.js";
+export { useSetupLocale } from "./useSetupLocale.js";
 export { useShowDevOnlyKey } from "./useShowDevOnlyKey.js";
+export { useSlotVars } from "./useSlotVars.js";
 export { useSuggestions } from "./useSuggestions.js";

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

@@ -1,5 +1,5 @@
 import { type Ref } from "vue";
-import type { Point } from "../types/index.js.js";
+import type { Point } from "../types/index.js";
 /**
  * A composable for dragging items only after a certain threshold of movement has been reached.
  *

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

@@ -1,2 +1,2 @@
-import type { DarkModeCommands, DarkModeState } from "./useDarkMode.js.js";
+import type { DarkModeCommands, DarkModeState } from "./useDarkMode.js";
 export declare function useInjectedDarkMode(): DarkModeState & DarkModeCommands;

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

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

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

@@ -1,2 +1,2 @@
-import type { useSetupLocale } from "./useSetupLocale.js.js";
+import type { useSetupLocale } from "./useSetupLocale.js";
 export declare function useInjectedLocale(): ReturnType<typeof useSetupLocale>;

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

@@ -1,4 +1,4 @@
-import type { NotificationHandler } from "../helpers/NotificationHandler.js.js";
+import type { NotificationHandler } from "../helpers/NotificationHandler.js";
 export declare const useNotificationHandler: (handler?: NotificationHandler, 
 /** True by default, should be passed import.meta.client if using nuxt, or false when running server side. */
 isClientSide?: boolean) => NotificationHandler;