@witchcraft/ui 0.3.24 → 0.4.0-beta.1

package/dist/runtime/components/WTooltip/WTooltip.vue

@@ -0,0 +1,111 @@
+<template>
+<TooltipProvider :disabled="disabled">
+	<TooltipRoot
+		:delay-duration="rootProps?.delayDuration ?? 200"
+		:disable-closing-trigger="rootProps?.disableClosingTrigger ?? false"
+		v-bind="rootProps"
+	>
+		<TooltipTrigger
+			v-if="triggerWhileDisabled"
+			as-child
+		>
+			<!-- https://reka-ui.com/docs/components/tooltip#displaying-a-tooltip-from-a-disabled-button -->
+			<span>
+				<slot>
+					<WIcon class="text-neutral-500"><i-lucide-info/></WIcon>
+				</slot>
+			</span>
+		</TooltipTrigger>
+		<TooltipTrigger v-else>
+			<slot>
+				<WIcon class="text-neutral-500">
+					<i-lucide-info/>
+				</WIcon>
+			</slot>
+		</TooltipTrigger>
+		<TooltipPortal
+			:to="to"
+		>
+			<TooltipContent
+				:style="contentStyle"
+				:class="twMerge(
+  `
+					z-100
+					tooltip--content-wrapper
+					origin-[var(--reka-tooltip-content-transform-origin)]
+					data-[side=top]:animate-slideDownAndFade
+					data-[side=right]:animate-slideLeftAndFade
+					data-[side=bottom]:animate-slideUpAndFade
+					data-[side=left]:animate-slideRightAndFade
+					bg-neutral-50
+					dark:bg-neutral-800
+					rounded-sm
+					shadow-sm
+					shadow-black/30
+					border
+					border-black/30
+					p-2
+					overflow-auto
+				`,
+  contentProps?.class
+)"
+				v-bind="{
+  collisionPadding: 20,
+  side: 'top',
+  ...contentProps,
+  class: void 0,
+  style: void 0
+}"
+			>
+				<div
+					class="
+						tooltip--content-container
+						text-sm
+						whitespace-pre-wrap
+						flex
+						flex-col
+						justify-center
+					"
+				>
+					<slot
+						name="content"
+						v-bind="{ content }"
+					>
+						{{ content }}
+					</slot>
+				</div>
+				<TooltipArrow
+					class="
+						tooltip--arrow
+						-mt-px
+						fill-neutral-50
+						dark:fill-neutral-800
+						drop-shadow-[0_2px_1px_rgba(0,0,0,0.3)]
+						relative
+					"
+				/>
+			</TooltipContent>
+		</TooltipPortal>
+	</TooltipRoot>
+</TooltipProvider>
+</template>
+
+<script setup>
+import { TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger } from "reka-ui";
+import { usePopupConstrainToStyle } from "../../composables/usePopupConstrainToStyle.js";
+import { twMerge } from "../../utils/twMerge.js";
+import WIcon from "../WIcon/WIcon.vue";
+const props = defineProps({
+  constrainWidthTo: { type: [Number, String, null], required: false, default: "available" },
+  constrainHeightTo: { type: [Number, String, null], required: false, default: "available" },
+  delayDuration: { type: Number, required: false, default: 200 },
+  disabled: { type: Boolean, required: false, default: false },
+  triggerWhileDisabled: { type: Boolean, required: false, default: false },
+  content: { type: String, required: false, default: "" },
+  collisionBoundary: { type: null, required: false },
+  to: { type: String, required: false, default: "#root" },
+  rootProps: { type: null, required: false },
+  contentProps: { type: null, required: false }
+});
+const contentStyle = usePopupConstrainToStyle("tooltip", props, [props?.contentProps?.style]);
+</script>

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

@@ -0,0 +1,40 @@
+import type { PopupConstrainToProps } from "../../types/index.js";
+type __VLS_Props = PopupConstrainToProps & {
+    delayDuration?: number;
+    disabled?: boolean;
+    triggerWhileDisabled?: boolean;
+    content?: string;
+    collisionBoundary?: Element | null;
+    to?: string;
+    /** Reka's TooltipRoot props */
+    rootProps?: any;
+    /** Reka's TooltipContent props */
+    contentProps?: any;
+};
+declare var __VLS_20: {}, __VLS_39: {}, __VLS_64: {
+    content: string;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_20) => any;
+} & {
+    default?: (props: typeof __VLS_39) => any;
+} & {
+    content?: (props: typeof __VLS_64) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    content: string;
+    disabled: boolean;
+    constrainWidthTo: number | "trigger" | "available" | string | null;
+    constrainHeightTo: number | "trigger" | "available" | string | null;
+    to: string;
+    delayDuration: number;
+    triggerWhileDisabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,20 +1,20 @@
-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/dist/runtime/components/index.js

@@ -1,20 +1,20 @@
-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/dist/runtime/composables/index.d.ts

@@ -1,17 +1,17 @@
 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/dist/runtime/composables/index.js

@@ -1,17 +1,17 @@
 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/dist/runtime/composables/useDelayedLoadingIndicator.d.ts

@@ -0,0 +1,9 @@
+import type { Ref } 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 declare function useDelayedLoadingIndicator(loading: Ref<boolean>, timeout?: number): Ref<boolean, boolean>;

package/dist/runtime/composables/useDelayedLoadingIndicator.js

@@ -0,0 +1,18 @@
+import { ref, watch } from "vue";
+export function useDelayedLoadingIndicator(loading, timeout = 200) {
+  const showLoadingIndicator = ref(false);
+  let loadingTimeout;
+  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/dist/runtime/composables/useDisplayForReka.d.ts

@@ -0,0 +1,25 @@
+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 declare function useDisplayForReka<T extends NonNullable<ComboboxRootProps["modelValue"]>>(props: SuggestionsDisplayProps<T>): (value: T, options?: {
+    isForEmit?: boolean;
+}) => string;

package/dist/runtime/composables/useDisplayForReka.js

@@ -0,0 +1,16 @@
+export function useDisplayForReka(props) {
+  const display = props.displayValue ?? function(value, options = {}) {
+    if (Array.isArray(value)) {
+      return value.map((v) => {
+        const val = v[props.displayKey];
+        return props.displayEntry?.(val, options) ?? val;
+      }).filter((v) => v !== "").join(", ");
+    } else if (typeof value === "object") {
+      return props.displayEntry?.(value, options) ?? value[props.displayKey];
+    } else {
+      if (value === "" && !options.isForEmit) return "";
+      return props.displayEntry?.(value, options) ?? value;
+    }
+  };
+  return display;
+}

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

@@ -0,0 +1,3 @@
+export declare function useFallbackId(props: {
+    id?: string;
+}): string;

package/dist/runtime/composables/useFallbackId.js

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

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

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

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

@@ -0,0 +1,8 @@
+import type { ComputedRef, StyleValue } 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 declare function usePopupConstrainToStyle(rekaName: string, props: PopupConstrainToProps, attrsStyle?: StyleValue[]): ComputedRef<StyleValue[]>;

package/dist/runtime/composables/usePopupConstrainToStyle.js

@@ -0,0 +1,8 @@
+import { computed } from "vue";
+export function usePopupConstrainToStyle(rekaName, props, attrsStyle) {
+  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 ?? void 0,
+    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 ?? void 0
+  }, ...attrsStyle ?? []]);
+  return contentStyle;
+}

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

@@ -1,4 +1,4 @@
-import { useDarkMode } from "./useDarkMode.js";
+import type { DarkModeCommands, DarkModeOptions, DarkModeState } from "../types/index.js";
 /**
  * A composable for setting up dark mode that automatically takes care of saving the user's preference.
  *
@@ -7,6 +7,5 @@ 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 declare function useSetupDarkMode(...args: Parameters<typeof useDarkMode>): ReturnType<typeof useDarkMode>;
+export declare const useSetupDarkMode: ({ useLocalStorage, darkModeOrder, isClientSide, useViewTransition }?: DarkModeOptions) => DarkModeState & DarkModeCommands;

package/dist/runtime/composables/useSetupDarkMode.js

@@ -1,4 +1,90 @@
-import { useDarkMode } from "./useDarkMode.js";
-export function useSetupDarkMode(...args) {
-  return useDarkMode(...args);
-}
+import { computed, nextTick, onMounted, provide, ref, watch } from "vue";
+import { darkModeCommandsInjectionKey, darkModeStateInjectionKey } from "../injectionKeys.js";
+import { defaultDarkModeOrder } from "../types/index.js";
+const isDarkModeInjectionKey = Symbol("isDarkMode");
+const manualDarkModeInjectionKey = Symbol("manualDarkMode");
+const defaultLocalStorageKey = "prefersColorSchemeDark";
+export const useSetupDarkMode = ({
+  useLocalStorage = true,
+  darkModeOrder = defaultDarkModeOrder,
+  isClientSide = true,
+  useViewTransition = true
+} = {}) => {
+  const systemDarkMode = ref(false);
+  const manualDarkMode = ref(void 0);
+  if (useLocalStorage && isClientSide) {
+    watch(manualDarkMode, () => {
+      localStorage.setItem(defaultLocalStorageKey, manualDarkMode.value ? "true" : "false");
+    });
+  }
+  const darkMode = computed(() => manualDarkMode.value ?? systemDarkMode.value);
+  const darkModeState = computed(
+    () => manualDarkMode.value === void 0 ? "system" : manualDarkMode.value ? "dark" : "light"
+  );
+  function setDarkMode(value) {
+    manualDarkMode.value = value === "dark" ? true : value === "light" ? false : void 0;
+  }
+  function getNextValue() {
+    const index = darkModeOrder.indexOf(darkModeState.value);
+    return index === 2 ? darkModeOrder[0] : darkModeOrder[index + 1];
+  }
+  function _cycleDarkMode() {
+    setDarkMode(getNextValue());
+  }
+  function cycleDarkMode() {
+    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]) {
+      _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/dist/runtime/helpers/NotificationHandler.d.ts

@@ -32,18 +32,40 @@ export type RawNotificationEntry<TOptions extends string[] = ["Ok", "Cancel"], T
     options?: TOptions;
     /** @default false */
     requiresAction?: boolean;
+    /**
+     *  If true or a string (the cancel option) ensures the option exists and that is the "default" cancel action when a notification is dismissed in some manner that is not clicking one of the options (escaped, background click, etc.).
+     *
+     * This also enables cancelling via those secondary methods, otherwise the notification won't allow itself to be dismissed.
+     *
+     * @default undefined / false
+     */
     cancellable?: TCancellable;
     /** @default "Ok" */
     default?: TOptions[number];
     /** @default [] */
     dangerous?: TOptions[number][];
-    /** @default false if cancellable, otherwise the default timeout */
+    /**
+     * Overrides the default timeout, can be set to true to just enable it. An entry must be cancellable to have a timeout.
+     *
+     * @default global timeout / false if cancellable is false
+     */
     timeout?: number | boolean;
     icon?: string;
     message: string;
     component?: string | Component;
-    /** By default the component is passed the message and the messageClasses. Both will be overriden if you set them on componentProps. */
-    componentProps?: Record<string, any>;
+    /** 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;
+    };
+    /**
+     * 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.
+     *
+     */
+    notificationAttrs?: Record<string, any>;
 };
 export type NotificationEntry<TRawEntry extends RawNotificationEntry<any, any> = RawNotificationEntry<any, any>> = Omit<MakeRequired<TRawEntry, "options" | "requiresAction" | "default" | "dangerous">, "cancellable"> & {
     promise: NotificationPromise;

package/dist/runtime/helpers/NotificationHandler.js

@@ -57,13 +57,6 @@ export class NotificationHandler {
         );
       }
     }
-    if (entry.timeout !== void 0 && !entry.cancellable) {
-      throw new Error(
-        crop`Cannot timeout notification that is not cancellable:
-					${indent(pretty(entry), 5)}
-					`
-      );
-    }
     if (entry.timeout !== void 0 && entry.requiresAction) {
       throw new Error(
         crop`Cannot timeout notification that requires action:
@@ -85,7 +78,6 @@ export class NotificationHandler {
       requiresAction: false,
       options: ["Ok", "Cancel"],
       default: "Ok",
-      cancellable: rawEntry.cancellable,
       ...rawEntry,
       component: rawEntry.component && typeof rawEntry.component !== "string" ? markRaw(rawEntry.component) : void 0,
       dangerous: rawEntry.dangerous ?? [],
@@ -153,7 +145,11 @@ export class NotificationHandler {
     const remaining = notification.timeout - notification._timer.elapsedBeforePause;
     clearTimeout(notification._timer.id);
     notification._timer.id = setTimeout(() => {
-      notification.resolve(notification.cancellable);
+      if (notification.cancellable) {
+        notification.resolve(notification.cancellable);
+      } else {
+        notification.resolve(notification.default);
+      }
     }, remaining);
   }
   static resolveToDefault(notification) {

package/dist/runtime/injectionKeys.d.ts

@@ -1,10 +1,6 @@
 import type { InjectionKey, Ref } from "vue";
-import type { DarkModeCommands, DarkModeState } from "./composables/useDarkMode.js";
 import type { TranslationFunction } from "./composables/useSetupI18n.js";
-/** @deprecated */
-export declare const isDarkModeInjectionKey: InjectionKey<Ref<boolean>>;
-/** @deprecated */
-export declare const manualDarkModeInjectionKey: InjectionKey<Ref<boolean | undefined>>;
+import type { DarkModeCommands, DarkModeState } from "./types/index.js";
 export declare const darkModeCommandsInjectionKey: InjectionKey<DarkModeCommands>;
 export declare const darkModeStateInjectionKey: InjectionKey<DarkModeState>;
 export declare const languageLocaleInjectionKey: InjectionKey<Ref<string>>;

package/dist/runtime/injectionKeys.js

@@ -1,5 +1,3 @@
-export const isDarkModeInjectionKey = Symbol("isDarkMode");
-export const manualDarkModeInjectionKey = Symbol("manualDarkMode");
 export const darkModeCommandsInjectionKey = Symbol("darkModeCommands");
 export const darkModeStateInjectionKey = Symbol("darkModeState");
 export const languageLocaleInjectionKey = Symbol("witchcraftUiLanguageLocale");