@witchcraft/ui 0.3.26 → 0.4.0-beta.2

package/src/runtime/components/index.ts

@@ -1,22 +1,22 @@
 /* Manually Generated Index */
 
-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"
+export { default as WButton } from "./WButton/WButton.vue"
+export { default as WCheckbox } from "./WCheckbox/WCheckbox.vue"
+export { default as WColorInput } from "./WColorInput/WColorInput.vue"
+export { default as WColorPicker } from "./WColorPicker/WColorPicker.vue"
+export { default as WCombobox } from "./WCombobox/WCombobox.vue"
+export { default as WDarkModeSwitcher } from "./WDarkModeSwitcher/WDarkModeSwitcher.vue"
+export { default as WDatePicker } from "./WDatePicker/WDatePicker.vue"
+export { default as WDebug } from "./WDebug/WDebug.vue"
+export { default as WFileInput } from "./WFileInput/WFileInput.vue"
+export { default as WNotifications } from "./WNotifications/WNotifications.vue"
+export { default as WPagination } from "./WPagination/WPagination.vue"
+export { default as WPopup } from "./WPopup/WPopup.vue"
+export { default as WPopover } from "./WPopover/WPopover.vue"
+export { default as WProgressBar } from "./WProgressBar/WProgressBar.vue"
+export { default as WRecorder } from "./WRecorder/WRecorder.vue"
+export { default as WRoot } from "./WRoot/WRoot.vue"
+export { default as WSimpleInput } from "./WSimpleInput/WSimpleInput.vue"
+export { default as WTable } from "./WTable/WTable.vue"
+export { default as WTimeZonePicker } from "./WDatePicker/WTimeZonePicker.vue"
+export { default as WTooltip } from "./WTooltip/WTooltip.vue"

package/src/runtime/composables/index.ts

@@ -1,19 +1,19 @@
 /* Autogenerated Index */
 
 export { useAccesibilityOutline } from "./useAccesibilityOutline.js"
-export { useAriaLabel } from "./useAriaLabel.js"
-export { useDarkMode } from "./useDarkMode.js"
-export { useDivideAttrs } from "./useDivideAttrs.js"
+export { useDelayedLoadingIndicator } from "./useDelayedLoadingIndicator.js"
 export { useDragWithThreshold } from "./useDragWithThreshold.js"
+export { useFallbackId } from "./useFallbackId.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 { usePopupConstrainToStyle } from "./usePopupConstrainToStyle.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"
+export { useTimeConditionally } from "./useTimeConditionally.js"

package/src/runtime/composables/useDelayedLoadingIndicator.ts

@@ -0,0 +1,30 @@
+import type { Ref } from "vue"
+import { ref, watch } from "vue"
+/**
+ * For async operations sometimes it actually loads so fast the loading indicator is not visible but we still want it to be briefly visible. This delays the setting of the returned ref to false by the given timeout so it at least flashes onscreen.
+ *
+ * Setting to true is not delayed.
+ *
+ * If the indicator is set to true while the timeout is still running, it's canceled.
+ */
+
+export function useDelayedLoadingIndicator(
+	loading: Ref<boolean>,
+	timeout: number = 200
+) {
+	const showLoadingIndicator = ref(false)
+	let loadingTimeout: number | NodeJS.Timeout | undefined
+	watch(loading, newVal => {
+		clearTimeout(loadingTimeout)
+		if (newVal === true) {
+			showLoadingIndicator.value = true
+		} else {
+			loadingTimeout = setTimeout(() => {
+				if (loading.value === false) {
+					showLoadingIndicator.value = false
+				}
+			}, timeout)
+		}
+	})
+	return showLoadingIndicator
+}

package/src/runtime/composables/useDisplayForReka.ts

@@ -0,0 +1,37 @@
+import type { AcceptableValue, ComboboxRootProps } from "reka-ui"
+
+export type SuggestionsDisplayProps<T extends NonNullable<AcceptableValue>> = {
+	displayKey?: string
+	/**
+	 * Override's reka-ui's displayValue.
+	 *
+	 * Prefer displayKey or displayEntry if possible as it's easier to type and requires less code.
+	 *
+	 * It's passed a special options object with a `isForEmit` boolean that tells you whether the value will be used for emits or just visually/search. This is useful to v-model an id when suggestions are objects.
+	 */
+	displayValue?: (value: T | T[], options?: { isForEmit?: boolean }) => string
+	/**
+	 * When displayKey is not enough, prefer this over displayValue as it takes care of extracting the entry (from the array/object/value).
+	 *
+	 * The component uses this to filter out the suggestions. In some rare cases you might want to display a different label than the one filtered on (e.g. for example, to indicate some suggestion is active), in these cases, the function will be called with the visualOnly option set to true. This applies only to the visual suggestion in the suggestion list.
+	 */
+	displayEntry?: (value: T, options: { isForEmit?: boolean }) => string
+}
+
+export function useDisplayForReka<T extends NonNullable<ComboboxRootProps["modelValue"]>>(props: SuggestionsDisplayProps<T>) {
+	const display = props.displayValue ?? function (value: T, options: { isForEmit?: boolean } = {}): string {
+		if (Array.isArray(value)) {
+			return value.map(v => {
+				const val = v[props.displayKey as keyof typeof v]
+				return props.displayEntry?.(val, options) ?? val
+			}).filter(v => v !== "").join(", ")
+		} else if (typeof value === "object") {
+			return props.displayEntry?.(value as any, options) ?? value[props.displayKey as keyof typeof value] as any
+		} else {
+			// special case when reka resets
+			if (value === "" && !options.isForEmit) return ""
+			return props.displayEntry?.(value as any, options) ?? value as any
+		}
+	}
+	return display
+}

package/src/runtime/composables/useFallbackId.ts

@@ -0,0 +1,6 @@
+import { useId } from "vue"
+
+export function useFallbackId(props: { id?: string }) {
+	const fallbackId = props.id ?? useId()
+	return fallbackId
+}

package/src/runtime/composables/useInjectedDarkMode.ts

@@ -1,8 +1,7 @@
 import { inject } from "vue"
 
-import type { DarkModeCommands, DarkModeState } from "./useDarkMode.js"
-
 import { darkModeCommandsInjectionKey, darkModeStateInjectionKey } from "../injectionKeys.js"
+import type { DarkModeCommands, DarkModeState } from "../types/index.js"
 
 export function useInjectedDarkMode(): DarkModeState & DarkModeCommands {
 	const darkModeState = inject(darkModeStateInjectionKey)

package/src/runtime/composables/usePopupConstrainToStyle.ts

@@ -0,0 +1,29 @@
+import type { ComputedRef, StyleValue } from "vue"
+import { computed } from "vue"
+
+import type { PopupConstrainToProps } from "../types/index.js"
+/**
+ * Mostly internal, create the computed style with maxWidth/Height based on the constrain*To props.
+ *
+ * @internal
+ */
+export function usePopupConstrainToStyle(rekaName: string, props: PopupConstrainToProps, attrsStyle?: StyleValue[]): ComputedRef<StyleValue[]> {
+	const contentStyle = computed(() => ([{
+		maxWidth: props.constrainWidthTo === "trigger"
+			? `var(--reka-${rekaName}-trigger-width)`
+			: props.constrainWidthTo === "available"
+				? `var(--reka-${rekaName}-content-available-width)`
+				: typeof props.constrainWidthTo === "number"
+					? `${props.constrainWidthTo}px`
+					: props.constrainWidthTo ?? undefined,
+		maxHeight: props.constrainHeightTo === "trigger"
+			? `var(--reka-${rekaName}-trigger-height)`
+			: props.constrainHeightTo === "available"
+				? `var(--reka-${rekaName}-content-available-height)`
+				: typeof props.constrainHeightTo === "number"
+					? `${props.constrainHeightTo}px`
+					: props.constrainHeightTo ?? undefined
+	}, ...(attrsStyle ?? [])] satisfies StyleValue[]))
+	return contentStyle
+}
+

package/src/runtime/composables/useSetupDarkMode.ts

@@ -1,4 +1,15 @@
-import { useDarkMode } from "./useDarkMode.js"
+import type { InjectionKey, Ref } from "vue"
+import { computed, nextTick, onMounted, provide, ref, watch } from "vue"
+
+import { darkModeCommandsInjectionKey, darkModeStateInjectionKey } from "../injectionKeys.js"
+import type { DarkModeCommands, DarkModeOptions, DarkModeState } from "../types/index.js"
+import { defaultDarkModeOrder } from "../types/index.js"
+
+
+const isDarkModeInjectionKey = Symbol("isDarkMode") as InjectionKey<Ref<boolean>>
+const manualDarkModeInjectionKey = Symbol("manualDarkMode") as InjectionKey<Ref<boolean | undefined>>
+const defaultLocalStorageKey = "prefersColorSchemeDark"
+
 /**
  * A composable for setting up dark mode that automatically takes care of saving the user's preference.
  *
@@ -7,8 +18,115 @@ import { useDarkMode } from "./useDarkMode.js"
  * Use it's twin, `useInjectedDarkMode` for accessing the injected state and commands in components
  *
  * Note that this should only be called once at the root of the app.
- *
  */
-export function useSetupDarkMode(...args: Parameters<typeof useDarkMode>): ReturnType<typeof useDarkMode> {
-	return useDarkMode(...args)
+export const useSetupDarkMode = ({
+	useLocalStorage = true,
+	darkModeOrder = defaultDarkModeOrder,
+
+	isClientSide = true,
+	useViewTransition = true
+}: DarkModeOptions = {}): DarkModeState & DarkModeCommands => {
+	const systemDarkMode = ref(false)
+	const manualDarkMode = ref<boolean | undefined>(undefined)
+
+	if (useLocalStorage && isClientSide) {
+		watch(manualDarkMode, () => {
+			localStorage.setItem(defaultLocalStorageKey, manualDarkMode.value ? "true" : "false")
+		})
+	}
+
+	const darkMode = computed(() => manualDarkMode.value ?? systemDarkMode.value)
+	const darkModeState = computed(() =>
+		manualDarkMode.value === undefined
+			? "system"
+			: manualDarkMode.value
+				? "dark"
+				: "light"
+	)
+	// todo move to useinjected
+	function setDarkMode(value: "dark" | "light" | "system"): void {
+		manualDarkMode.value
+			= value === "dark"
+				? true
+				: value === "light"
+					? false
+					: undefined
+	}
+
+	function getNextValue(): "dark" | "light" | "system" {
+		const index = darkModeOrder.indexOf(darkModeState.value)
+
+		return index === 2
+			? darkModeOrder[0]!
+			: darkModeOrder[index + 1]!
+	}
+
+	function _cycleDarkMode(): void {
+		setDarkMode(getNextValue())
+	}
+
+	function cycleDarkMode(): void {
+		if (!useViewTransition) {
+			_cycleDarkMode()
+			return
+		}
+		const nextValue = getNextValue()
+		const index = darkModeOrder.indexOf(darkModeState.value)
+		const systemDarkModeName = systemDarkMode.value ? "dark" : "light"
+
+		if (nextValue === "system" && systemDarkModeName === darkModeOrder[index]) {
+			// don't do view transitions if we're not really transitioning
+			_cycleDarkMode()
+			return
+		}
+		if (!document.startViewTransition) _cycleDarkMode()
+		document.startViewTransition(async () => {
+			_cycleDarkMode()
+			await nextTick()
+		})
+	}
+
+	onMounted(() => {
+		window.matchMedia("(prefers-color-scheme: dark)")
+			.addEventListener("change", ({ matches }) => {
+				if (matches) {
+					systemDarkMode.value = true
+				} else {
+					systemDarkMode.value = false
+				}
+			})
+		if (useLocalStorage !== false) {
+			const key = typeof useLocalStorage === "string" ? useLocalStorage : defaultLocalStorageKey
+			const value = localStorage.getItem(key)
+
+			if (value === "true") {
+				manualDarkMode.value = true
+			} else if (value === "false") {
+				manualDarkMode.value = false
+			}
+		}
+	})
+	provide(isDarkModeInjectionKey, darkMode)
+	provide(manualDarkModeInjectionKey, manualDarkMode)
+
+	provide(darkModeStateInjectionKey, {
+		darkMode,
+		darkModeState,
+		manualDarkMode,
+		systemDarkMode
+	})
+	provide(darkModeCommandsInjectionKey, {
+		setDarkMode,
+		cycleDarkMode
+	})
+
+	return {
+		darkMode,
+		darkModeState,
+		setDarkMode,
+		cycleDarkMode,
+		manualDarkMode,
+		systemDarkMode
+	}
 }
+

package/src/runtime/helpers/NotificationHandler.ts

@@ -239,12 +239,12 @@ export type RawNotificationEntry<
 	/** Props for the custom component. By default the component is passed the message, the messageClasses, and the full notification. Both will be overriden if you set them on componentProps. */
 	componentProps?: Record<string, any> & { notification: NotificationEntry, message: string, messageClasses: string }
 	/**
-	 * Props for the notification component itself. They are bound to the root of the element and the class property is merged with twMerge.
+	 * Attributes for the notification component itself. They are bound to the root of the element and the class property is merged with twMerge.
 	 *
 	 * The most likely use is needing to adjust the width of fullscreen notifications, but fullscreen notifications have two widths (one for big screens and one for small ones (sm). You will usually want to do something like `{notificationProps: {class: 'sm:max-w-[90dvw]'}}` to change only the large one.
 	 *
 	 */
-	notificationProps?: Record<string, any>
+	notificationAttrs?: Record<string, any>
 }
 
 export type NotificationEntry<

package/src/runtime/injectionKeys.ts

@@ -1,13 +1,7 @@
 import type { InjectionKey, Ref } from "vue"
 
-import type { DarkModeCommands, DarkModeState } from "./composables/useDarkMode.js"
 import type { TranslationFunction } from "./composables/useSetupI18n.js"
-
-/** @deprecated */
-export const isDarkModeInjectionKey = Symbol("isDarkMode") as InjectionKey<Ref<boolean>>
-
-/** @deprecated */
-export const manualDarkModeInjectionKey = Symbol("manualDarkMode") as InjectionKey<Ref<boolean | undefined>>
+import type { DarkModeCommands, DarkModeState } from "./types/index.js"
 
 export const darkModeCommandsInjectionKey = Symbol("darkModeCommands") as InjectionKey<DarkModeCommands>
 

package/src/runtime/types/index.ts

@@ -84,38 +84,6 @@ export type ScrollNearContainerEdgesOptions = {
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export type SimpleDOMRect = Omit<DOMRect, "toJSON">
 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-export interface IPopupReference { getBoundingClientRect: () => SimpleDOMRect }
-export type PopupPosition = { x: number, y: number, maxWidth?: number, maxHeight?: number }
-export type PopupSpaceInfo = {
-	left: number
-	right: number
-	leftLeft: number
-	rightRight: number
-	leftFromCenter: number
-	rightFromCenter: number
-	topFromCenter: number
-	bottomFromCenter: number
-	top: number
-	bottom: number
-}
-export type PopupPositioner = (
-	/** Reference is only undefined, if you did not specify a button element or use the exposed setReference. The function is still called, because there are other ways you might want to still position the popup (e.g. center-screen or some similar variation). */
-	reference: SimpleDOMRect | undefined,
-	popup: SimpleDOMRect | DOMRect,
-	bg: SimpleDOMRect | DOMRect,
-	space: PopupSpaceInfo
-) => number
-
-export type PopupPositionModifier = (
-	pos: PopupPosition,
-/** This will only be called with the reference element as undefined when one of the preferred positions is center-screen or it's a function. */
-	reference: SimpleDOMRect | undefined,
-	popup: SimpleDOMRect | DOMRect,
-	bg: SimpleDOMRect | DOMRect,
-	space: PopupSpaceInfo
-) => PopupPosition
-
 export type SingleDate = Date | undefined
 
 export type RangeDate = {
@@ -127,3 +95,108 @@ export type CustomNotificationComponentProps = {
 	message: string
 	messageClasses?: string
 }
+
+
+export type BaseInteractiveProps = {
+	/** Default is false. */
+	disabled?: boolean
+	/** Default is false. */
+	readonly?: boolean
+	/** Default is true. */
+	border?: boolean
+	/** Removes styles from the component. Default is false. */
+	unstyle?: boolean
+}
+
+
+export type TailwindClassProp = {
+	/** Tailwind classes. */
+	class?: string | false
+}
+
+
+export const defaultDarkModeOrder = ["system", "dark", "light"] as const
+
+
+export type DarkModeOptions = {
+	/* Whether to save the manual dark mode to local storage. Uses the key "prefersColorSchemeDark" by default. You can pass a key instead of true to use that as the key instead. */
+	useLocalStorage?: boolean | string
+	/* The order of the string dark modes when using `cycleDarkMode`. Defaults to `["system", "dark", "light"]` */
+	darkModeOrder?: readonly ("system" | "dark" | "light")[]
+	/** True by default, should be passed import.meta.client if using nuxt, or false when running server side. */
+	isClientSide?: boolean
+	/**
+	 * Whether to use the view transition to animate the dark mode switch (you just need to add the css).
+	 *
+	 * Note that the transitition is NOT triggered if visually the mode does not change (e.g. system mode is dark and the user switches from system to dark, visually nothing changes so transitioning is skipped).
+	 *
+	 * There is an example in storybook. But basically:
+	 *
+	 * ```css
+	 *
+	 * #root { // the dark mode switcher works on the WRoot component not the html root
+	 *		view-transition-name: wroot;
+	 *		height: 100dvh;
+	 *		padding: 0;
+	 *	}
+	 *
+	 * ::view-transition-new(wroot) {
+	 * 	animation: grow var(--story-anim-length) ease-in-out;
+	 * 	animation-fill-mode: both;
+	 * 	z-index: 2;
+	 * 	mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"><circle cx="20" cy="20" r="20" fill="white"/></svg>') center / 0 no-repeat;
+	 * }
+	 *
+	 * ::view-transition-old(wroot) {
+	 * 	animation: none;
+	 * 	animation-fill-mode: both;
+	 * 	z-index: 1;
+	 * }
+	 *
+	 * @keyframes grow {
+	 * 	from {
+	 * 		mask-size: 0dvw;
+	 * 	}
+	 * 	to {
+	 * 		mask-size: 300dvw;
+	 * 	}
+	 * }
+	 * ```
+	 *
+	 * See https://theme-toggle.rdsx.dev/ for more ideas.
+	 *
+	 * @default true
+	 */
+	useViewTransition?: boolean
+}
+
+export interface DarkModeCommands {
+	setDarkMode: (value: "dark" | "light" | "system") => void
+	cycleDarkMode: () => void
+}
+
+export interface DarkModeState {
+	/** Whether the dark mode should be enabled or not */
+	darkMode: Ref<boolean>
+	/** The current state of the darkMode but as a string (dark, light, system) */
+	darkModeState: Ref<"dark" | "light" | "system">
+	/** The value of the manuably controllable dark mode. You can set this to true/false or undefined to allow the systemDarkMode to take priority. Alternatively use setDarkMode instead. */
+	manualDarkMode: Ref<boolean | undefined>
+	/** The value of the system dark mode. This is automatically set depending on the user's `prefer-color-scheme` and should not be set directly. */
+	systemDarkMode: Ref<boolean>
+
+}
+export type PopupConstrainToProps = {
+	constrainWidthTo?: number | "trigger" | "available" | string | null
+	constrainHeightTo?: number | "trigger" | "available" | string | null
+}
+
+
+export type EmitsToProps<T> = {
+	[K in keyof T as K extends string ? `on${Capitalize<K>}` : never]?:
+	T[K] extends (...args: infer Args) => any
+		? (...args: Args) => void
+		: T[K] extends any[]
+			? (...args: T[K]) => void
+			: T[K]
+}

package/types/components.d.ts

@@ -8,20 +8,18 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    IFa6RegularCopy: typeof import('~icons/fa6-regular/copy')['default']
-    IFa6RegularFile: typeof import('~icons/fa6-regular/file')['default']
-    IFa6SolidArrowUpFromBracket: typeof import('~icons/fa6-solid/arrow-up-from-bracket')['default']
-    IFa6SolidChevronUp: typeof import('~icons/fa6-solid/chevron-up')['default']
-    IFa6SolidCircleHalfStroke: typeof import('~icons/fa6-solid/circle-half-stroke')['default']
-    IFa6SolidXmark: typeof import('~icons/fa6-solid/xmark')['default']
-    IFaSolidMoon: typeof import('~icons/fa-solid/moon')['default']
-    IPhSunBold: typeof import('~icons/ph/sun-bold')['default']
-    IRadixIconsCalendar: typeof import('~icons/radix-icons/calendar')['default']
-    IRadixIconsChevronLeft: typeof import('~icons/radix-icons/chevron-left')['default']
-    IRadixIconsChevronRight: typeof import('~icons/radix-icons/chevron-right')['default']
-    IRadixIconsDoubleArrowLeft: typeof import('~icons/radix-icons/double-arrow-left')['default']
-    IRadixIconsDoubleArrowRight: typeof import('~icons/radix-icons/double-arrow-right')['default']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
+    ILucideCalendarDays: typeof import('~icons/lucide/calendar-days')['default']
+    ILucideCalendarRange: typeof import('~icons/lucide/calendar-range')['default']
+    ILucideCheck: typeof import('~icons/lucide/check')['default']
+    ILucideChevronLeft: typeof import('~icons/lucide/chevron-left')['default']
+    ILucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
+    ILucideChevronsLeft: typeof import('~icons/lucide/chevrons-left')['default']
+    ILucideChevronsRight: typeof import('~icons/lucide/chevrons-right')['default']
+    ILucideCopy: typeof import('~icons/lucide/copy')['default']
+    ILucideFile: typeof import('~icons/lucide/file')['default']
+    ILucideInfo: typeof import('~icons/lucide/info')['default']
+    ILucideLoaderCircle: typeof import('~icons/lucide/loader-circle')['default']
+    ILucideUpload: typeof import('~icons/lucide/upload')['default']
+    ILucideX: typeof import('~icons/lucide/x')['default']
   }
 }

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

@@ -1,6 +0,0 @@
-type __VLS_Props = {
-    value: string;
-};
-declare const __VLS_export: 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>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

@@ -1,16 +0,0 @@
-<template>
-<div tabindex="0">
-	{{ value }}
-</div>
-</template>
-
-<script setup>
-defineOptions({ name: "Aria" });
-defineProps({
-  value: { type: String, required: true }
-});
-</script>
-
-<style scoped>
-div{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);white-space:nowrap}
-</style>

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

@@ -1,6 +0,0 @@
-type __VLS_Props = {
-    value: string;
-};
-declare const __VLS_export: 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>;
-declare const _default: typeof __VLS_export;
-export default _default;

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

@@ -1,37 +0,0 @@
-import { type ButtonHTMLAttributes } from "vue";
-import { type BaseInteractiveProps, type ButtonProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js";
-type RealProps = LinkableByIdProps & LabelProps & BaseInteractiveProps & ButtonProps;
-interface Props extends 
-/** @vue-ignore */
-Partial<Omit<ButtonHTMLAttributes, "class" | "color" | "disabled"> & TailwindClassProp & {
-    "aria-label": string;
-}>, RealProps {
-}
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    label: string;
-    color: "warning" | "ok" | "danger" | "primary" | "secondary" | false;
-    disabled: boolean;
-    readonly: boolean;
-    border: boolean;
-    unstyle: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    label?: (props: {
-        id: string;
-        classes: string;
-    }) => any;
-} & {
-    icon?: (props: {}) => any;
-} & {
-    default?: (props: {
-        label: string;
-    }) => any;
-} & {
-    'icon-after'?: (props: {}) => any;
-}>;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

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

@@ -1,37 +0,0 @@
-import { type ButtonHTMLAttributes } from "vue";
-import { type BaseInteractiveProps, type ButtonProps, type LabelProps, type LinkableByIdProps, type TailwindClassProp } from "../shared/props.js";
-type RealProps = LinkableByIdProps & LabelProps & BaseInteractiveProps & ButtonProps;
-interface Props extends 
-/** @vue-ignore */
-Partial<Omit<ButtonHTMLAttributes, "class" | "color" | "disabled"> & TailwindClassProp & {
-    "aria-label": string;
-}>, RealProps {
-}
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    label: string;
-    color: "warning" | "ok" | "danger" | "primary" | "secondary" | false;
-    disabled: boolean;
-    readonly: boolean;
-    border: boolean;
-    unstyle: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    label?: (props: {
-        id: string;
-        classes: string;
-    }) => any;
-} & {
-    icon?: (props: {}) => any;
-} & {
-    default?: (props: {
-        label: string;
-    }) => any;
-} & {
-    'icon-after'?: (props: {}) => any;
-}>;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};